import React,{ useEffect } from 'react'
import { connect } from 'react-redux'
import { Button,Icon, Tabs } from 'antd'
import { withRouter } from 'next/router'
import LRU from 'lru-cache'
import getConfig from 'next/config'
import { request } from '../lib/dealRquest'
import Repo from '../components/Repo'

const cache  = new LRU({
  maxAge: 1000 * 60
})

const isSever = typeof window === 'undefined'

let cachedUserRepos, cachedUserStartedRepos
class Index extends React.Component{
  static async getInitialProps({store,req,res}) {
    let userRepos, userStarred
    if(!isSever){
      if (cachedUserRepos && cachedUserStartedRepos){
        return {
          userRepos: cachedUserRepos,
          userStarred: cachedUserStartedRepos
        }
      }
    }
    if (store.getState().user.id) {
      userRepos = await request({url: '/user/repos'}, req, res)
      userStarred = await request({url: '/user/starred'}, req, res)
    }
    if (!isSever) {
      cachedUserRepos = userRepos? userRepos.data : ''
      cachedUserStartedRepos = userStarred ? userStarred.data: ''
    }
    setTimeout(() => {
      cachedUserRepos = null
      cachedUserStartedRepos = null
    }, 10000)
    return {
      userRepos: userRepos? userRepos.data : '',
      userStarred: userStarred ? userStarred.data: ''
    }
  }

  render() {
    const { user,router } = this.props
    const userRepos = this.props.userRepos
    const userStarred = this.props.userRepos
    const tabKey = router.query.key || '1'
    const handleTabChange = (activeKey) => {
      router.push(`/?key=${activeKey}`)
    }
    if(!user.id) {
      const { publicRuntimeConfig} = getConfig()
      return (
        <div className="root">
          <p>亲，您还没登录哦~</p>
          <Button type="primary" href={publicRuntimeConfig.OAUTH_URL}>点击登陆</Button>
          <style jsx>{`
            .root {
              height: 400px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
          `}</style>
        </div>
      )
    } else {
      return (
        <div className="root">
          <div className="user-info">
            <img src={user.avatar_url} alt="user avatar" className="avatar"/>
            <span className="login">{user.login}</span>
            <span className="name">{user.name}</span>
            <span className="boi">{user.bio}</span>
            { user.email ?
              <p className="email">
                <Icon type="mail"  className="email-icon" />
                 <a href={`mailto:${user.email}`}>{user.email}</a>
              </p>
              : null }
          </div>
          <div className="user-repos">
            {/*{ userRepos.map( repo => (<Repo  repo={repo} key={repo.id}/>))}*/}
            <Tabs defaultActiveKey={tabKey} onChange={handleTabChange} animated={false}>
              <Tabs.TabPane tab="你的仓库" key="1">
                { userRepos.map( repo => (
                <Repo  repo={repo} key={repo.id}/>
                )) }
              </Tabs.TabPane>
              <Tabs.TabPane tab="你关注的仓库" key="2">
               { userStarred.map( repo => (
                <Repo  repo={repo} key={repo.id}/>
                )) }
              </Tabs.TabPane>
            </Tabs>
          </div>
          <style jsx>{`
            .root {
             display: flex;
             align-items: flex-start;
             padding-top: 40px;
             padding-left: 50px;
            }
            .user-info {
              width: 200px;
              height: 200px;
              margin-right: 50px;
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }
            .login {
              font-weight: 800;
              font-size: 20px;
              margin-top: 20px;
            }
            .name {
              font-size: 16px;
              color: #777;
            }
            .email-icon {
              margin-right: 10px
            }
            .bio {
              margin-top: 20px;
              color: #333333;
            }
            .avatar {
              width: 100%;
              border-radius: 5px;
            }
            .user-repos {
              flex-grow: 1;
            }
          `}</style>
        </div>
      )
    }
  }
}
export default withRouter( connect(function mapStateToProps(state) {
   return {
     user: state.user
   }
 })(Index))
